<!DOCTYPE html>
<html>

<head>
    <title>ECharts 图谱可视化</title>
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/echarts.js"></script>
    <style>
        html,
        body,
        #main {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background-color: #050d23;
        }
    </style>
</head>

<body>
    <div id="main"></div>
    <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> -->
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var categories = [{
            name: "对象"
        }, {
            name: "属性"
        }, {
            name: "实例"
        }];
        option = {
            // 图的标题
            title: {
                text: '知识图谱可视化'
            },
            // 提示框的配置
            tooltip: {
                formatter: function (x) {
                    return x.data.des;
                }
            },
            // 工具箱
            toolbox: {
                // 显示工具箱
                show: true,
                feature: {
                    mark: {
                        show: true
                    },
                    // 还原
                    restore: {
                        show: true
                    },
                    // 保存为图片
                    saveAsImage: {
                        show: true
                    }
                }
            },
            legend: [{
                // selectedMode: 'single',
                data: categories.map(function (a) {
                    return a.name;
                })
            }],
            series: [{
                type: 'graph', // 类型:关系图
                layout: 'force', //图的布局，类型为力导图
                //symbolSize: 40, // 调整节点的大小
                symbolSize: 100,
                roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                edgeSymbol: ['circle', 'arrow'],
                edgeSymbolSize: [2, 10],
                edgeLabel: {
                    normal: {
                        textStyle: {
                            fontSize: 20
                        }
                    }
                },
                force: {
                    repulsion: 2500,
                    edgeLength: [10, 50]
                },
                draggable: true,
                lineStyle: {
                    color: 'source',
                    curveness: 0.1
                },
                edgeLabel: {
                    normal: {
                        show: true,
                        fontSize: 11,
                        color: "#FFF",
                        formatter: function (x) {
                            return x.data.name;
                        }
                    }
                },
                label: {
                    normal: {
                        show: true,
                        textStyle: {

                        },
                    }
                },

                // 数据
                data: [{
                    name: '机器学习算法工程师技能树',
                    des: '某公司的员工', //描述
                    symbolSize: 90,
                    category: '对象',
                }, {
                    name: '机器学习理论',
                    symbolSize: 60,
                    category: '属性',
                }, {
                    name: '基础开发能力',
                    symbolSize: 60,
                    category: '属性',
                }, {
                    name: '开发语言',
                    symbolSize: 60,
                    category: '属性',
                }, {
                    name: '数据结构和算法',
                    symbolSize: 60,
                    category: '属性',
                }, {
                    name: '特征处理',
                    symbolSize: 60,
                    category: '属性',
                }, {
                    name: '架构设计',
                    symbolSize: 60,
                    category: '属性',
                }, {
                    name: '基础理论',
                    symbolSize: 60,
                    category: '属性',
                }, {
                    name: '有监督学习',
                    des: '', //没有描述
                    symbolSize: 60,
                    category: '对象',
                }, {
                    name: '概率和统计基础',
                    des: 'nodedes3',
                    symbolSize: 60,
                    category: '实例',
                }],
                links: [{
                    source: '机器学习算法工程师技能树',
                    target: '有监督学习',
                    name: '工作于',
                    des: ''
                }, {
                    source: '机器学习理论',
                    target: '机器学习算法工程师技能树',
                    name: 'isPropertyOf',
                    des: ''
                }, {
                    source: '基础开发能力',
                    target: '机器学习算法工程师技能树',
                    name: 'isPropertyOf',
                    des: ''
                }, {
                    source: '开发语言',
                    target: '机器学习算法工程师技能树',
                    name: 'isPropertyOf',
                    des: ''
                }, {
                    source: '数据结构和算法',
                    target: '机器学习算法工程师技能树',
                    name: 'isPropertyOf',
                    des: ''
                }, {
                    source: '特征处理',
                    target: '机器学习算法工程师技能树',
                    name: 'isPropertyOf',
                    des: ''
                }, {
                    source: '架构设计',
                    target: '机器学习算法工程师技能树',
                    name: 'isPropertyOf',
                    des: ''
                }, {
                    source: '基础理论',
                    target: '机器学习算法工程师技能树',
                    name: 'isPropertyOf',
                    des: ''
                }, {
                    source: '概率和统计基础',
                    target: '机器学习算法工程师技能树',
                    name: 'isExampleOf',
                    des: ''
                }],
                categories: categories,
            }]
        };
        myChart.setOption(option);
    </script>
</body>

</html>